<template>
	<div class="uploader">
		<el-upload class="file-uploader" :action="action" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
			<div class="inner-box">
				<div class="desc">
					<i class="el-icon-plus"></i>
					<p>{{ title }}</p>
				</div>
			</div>
		</el-upload>
		<p class="tip">{{ tip }}</p>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="" />
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			default: ''
		},
		tip: {
			type: String,
			default: ''
		}
	},
	name: 'uploader',
	components: {},
	data() {
		return {
			action: 'https://jsonplaceholder.typicode.com/posts/',
			dialogImageUrl: '',
			dialogVisible: false
		};
	},
	computed: {},
	mounted() {},
	methods: {
		handleRemove(file, fileList) {
			console.log(file, fileList);
		},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		}
	}
};
</script>

<style scoped lang="less">
.uploader {
	display: flex;
	// align-items: center;
	padding: 20px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e8ecef;
	.tip {
		display: inline-block;
		margin-top: 25px;
	}
	/deep/.file-uploader {
		display: inline-block;
		width: 130px;
		.el-upload {
			display: inline-block;
			// .bor();k
			border: 1px dashed #d9d9d9;
			// border-radius: 6px;
			cursor: pointer;
			position: relative;
			// overflow: hidden;
			&:hover {
				border-color: @theme;
			}
			.inner-box {
				line-height: 1;
				width: 79px;
				height: 79px;
				background: #ffffff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.desc {
					.el-icon-plus{
						font-size: 20px;
						color: #B7B7B7;
					}
					p {
						margin-top: 10px;
						font-weight: 400;
						font-size: 14px;
						color: #333333;
						font-style: normal;
					}
				}
			}
		}
	}
}
</style>
